<template>
    <div class="task-management table-content">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" width="800px">
            <template #content>
                <div class="task-management_content">
                    <div class="list">
                        <div class="list-head item">
                            <span class="index">序号</span>
                            <span class="engine">引擎</span>
                            <span class="name">项目名称</span>
                            <span class="status">进度状态</span>
                            <span class="path">项目文件</span>
                        </div>
                        <div class="item" v-for="(item, i) in componentRef.taskList">
                            <span class="index">{{i >= 9 ? '' : '0'}}{{i + 1}}</span>
                            <span class="engine">{{item.engine}}</span>
                            <span class="name">{{item.name}}</span>
                            <span class="status">{{item.status}}</span>
                            <span class="path">{{item.path}}</span>
                        </div>
                    </div>
                    <div class="control">
                        <div class="control_title">控制</div>
                        <pui-button>取消任务</pui-button>
                        <pui-button>暂停任务</pui-button>
                        <pui-button>恢复任务</pui-button>
                        <pui-button>删除任务</pui-button>
                    </div>
                </div>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'TaskManagement'
})
</script>
<script lang="ts" setup>
import { reactive } from 'vue'
const props = defineProps({
    title: {
        type: String,
        default: '任务管理'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const componentRef = reactive({
    dialogVisible: false,
    taskList: [
        {
            engine: 'localhost',
            name: 'test_graph_1',
            status: 1,
            path: './_graph/test_graph_1'
        },
        {
            engine: 'localhost',
            name: 'test_graph_2',
            status: 2,
            path: './_graph/test_graph_2'
        },
        {
            engine: 'localhost',
            name: 'test_graph_3',
            status: 3,
            path: './_graph/test_graph_3'
        },
        {
            engine: 'localhost',
            name: 'test_graph_4',
            status: 4,
            path: './_graph/test_graph_4'
        },
        {
            engine: 'localhost',
            name: 'test_graph_4',
            status: 5,
            path: './_graph/test_graph_5'
        },
    ]
})
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
}
defineExpose({
    init,
    closeDialog
})
</script>